<template>
  <div class="app-container">
    <div class="app-title">
      查询条件
    </div>
    <div class="seach_box">
      <div class="searchItem">
        <label>
          城市名称:
        </label>
        <el-input
          v-model="idOrNameOrMobile"
          placeholder="请输入城市名称"
        />
      </div>
      <div class="right_seach">
        <div>
          <span class="left_text">车源地 {{ carDateNumber[0] }}</span>
          <span>成交地  {{ carDateNumber[1] }}</span>
        </div>

        <div>
          <el-button @click="reset">重置</el-button>
          <el-button type="primary" @click="seach">查询</el-button>
        </div>
      </div>
    </div>
    <div class="box_collapse">
      <div v-if="filterData.length" class="collapse_div">
        <el-collapse v-model="activeNames" @change="changeCollapse">
          <el-collapse-item v-for="item in filterData" :key="item.provinceCode" :name="item.provinceCode" :title="item.provinceName">
            <div v-for="ele in item.cityList" :key="ele.cityCode" style="margin-left:100px;margin-bottom:20px;">
              <span style="width:200px;display:inline-block"> {{ ele.cityName }}</span>

              <span style="width:100px;display:inline-block">车源地  <el-checkbox v-model="ele.isOpenedSource" @change="changeCheckbox(ele)" /></span>
              <span>成交地 <el-checkbox v-model="ele.isOpenedClinchDeal" /></span>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
      <div v-else class="collapse_div">
        <el-collapse v-model="activeNames" @change="changeCollapse">
          <el-collapse-item v-for="item in provice" :key="item.provinceCode" :name="item.provinceCode" :title="item.provinceName">
            <div v-for="ele in item.cityList" :key="ele.cityCode" style="margin-left:100px;margin-bottom:20px;">
              <span style="width:200px;display:inline-block"> {{ ele.cityName }}</span>

              <span style="width:100px;display:inline-block">车源地  <el-checkbox v-model="ele.isOpenedSource" @change="changeCheckbox(ele)" /></span>
              <span>成交地 <el-checkbox v-model="ele.isOpenedClinchDeal" /></span>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
      <div class="btn">
        <el-button type="primary" @click="isSeaver">保存</el-button>
      </div>
    </div>

  </div>
</template>
<script>
export default {
  data() {
    return {
      idOrNameOrMobile: '',
      activeNames: [],
      provice: [],
      carDateNumber: [],
      proviceList: [],
      seachList: [],
      filterData: []
    }
  },
  created() {
    this.inquire()
  },
  methods: {
    reset() {
      this.activeNames = []

      this.idOrNameOrMobile = ''
      this.filterData = []
      this.inquire()
    },
    isSeaver() {
      let data = []
      if (this.filterData.length) {
        console.log('filterData')
        const elementData = []
        this.provice.forEach(element => {
          element.cityList.forEach(ele => {
            elementData.push(ele)
          })
        })
        console.log('data', elementData)
        this.filterData.forEach(item => {
          item.cityList.forEach(ele => {
            data.push({
              'provinceCode': item.provinceCode,
              'cityCode': ele.cityCode,
              'isOpenedSource': ele.isOpenedSource ? '1' : 0,
              'isOpenedClinchDeal': ele.isOpenedClinchDeal ? '1' : 0

            })
          })
        })
        const results = JSON.parse(JSON.stringify(elementData))
        results.forEach((item, idx) => {
          data.forEach(ele => {
            if (item.cityCode === ele.cityCode) {
              results.splice(idx, 1)
            }
          })
        })
        data.forEach(item => {
          results.push(item)
        })
        const islast = []
        results.forEach(ele => {
          islast.push({
            'provinceCode': ele.provinceCode,
            'cityCode': ele.cityCode,
            'isOpenedSource': ele.isOpenedSource ? '1' : 0,
            'isOpenedClinchDeal': ele.isOpenedClinchDeal ? '1' : 0
          })
        })
        data = islast
        console.log('results', results)
      } else {
        console.log('else')
        this.provice.forEach(item => {
          item.cityList.forEach(ele => {
            console.log('ele', ele)
            data.push({
              'provinceCode': item.provinceCode,
              'cityCode': ele.cityCode,
              'isOpenedSource': ele.isOpenedSource ? '1' : 0,
              'isOpenedClinchDeal': ele.isOpenedClinchDeal ? '1' : 0
            })
          })
        })
      }
      this.$confirm('确认是否保存当前设置', '提示', {
        confirmButtonText: '保存',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$post('/web/serviceCity/serviceCityMaintenanceAdd', data, '1').then(res => {
        // eslint-disable-next-line eqeqeq
          if (res.data.code == 0) {
            this.isred()
            this.$message({
              type: 'success',
              message: '保存成功!'
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消保存'
        })
      })
      console.log('data', JSON.stringify(data), data, '1')
    },
    async  inquire() {
      await this.$get('/web/serviceCity/getList').then(res => {
        // eslint-disable-next-line eqeqeq
        if (res.data.code == '0') {
          this.provice = res.data.data
          this.provice.forEach(item => {
            item.cityList.forEach(ele => {
              ele.provinceCode = item.provinceCode
              // eslint-disable-next-line eqeqeq
              if (ele.isOpenedClinchDeal == 0 || ele.isOpenedClinchDeal == null) {
                this.$set(ele, 'isOpenedClinchDeal', false)
              // eslint-disable-next-line eqeqeq
              } else if (ele.isOpenedClinchDeal == 1) {
                this.$set(ele, 'isOpenedClinchDeal', true)
              }
              // eslint-disable-next-line eqeqeq
              if (ele.isOpenedSource == 0 || ele.isOpenedSource == null) {
                this.$set(ele, 'isOpenedSource', false)
              // eslint-disable-next-line eqeqeq
              } else if (ele.isOpenedSource == 1) {
                this.$set(ele, 'isOpenedSource', true)
              }
            })
          })
          this.proviceList = res.data.data
        }
      })
      this.$get('/web/serviceCity/clinchADealCarInSitu').then(res => {
        // eslint-disable-next-line eqeqeq
        if (res.data.code == 0) {
          this.carDateNumber = res.data.data
        }
      })
    },
    isred() {
      this.$get('/web/serviceCity/clinchADealCarInSitu').then(res => {
        // eslint-disable-next-line eqeqeq
        if (res.data.code == 0) {
          this.carDateNumber = res.data.data
        }
      })
    },
    changeCollapse(v) {
      console.log(v)
    },
    changeCheckbox(v) {
      console.log('cghe', v)
    },
    async seach() {
      this.activeNames = []
      if (this.idOrNameOrMobile) {
        var _this = this
        const data = JSON.parse(JSON.stringify(this.provice))
        var NewItems = []
        data.map(function(item) {
          item.childrenCity = []
          item.cityList.forEach(ele => {
            // eslint-disable-next-line eqeqeq
            if (ele.cityName.search(_this.idOrNameOrMobile) != -1) {
              item.childrenCity.push(ele)
              console.log('item', item)
              NewItems.push(item)
            }
          })
        })
        NewItems = this.FilterByName(NewItems, 'provinceCode')
        NewItems.forEach(item => {
          this.activeNames.push(item.provinceCode)
          item.cityList = item.childrenCity
        })
        console.log(NewItems)
        this.filterData = NewItems
      } else {
        this.filterData = []
        this.inquire()
      }
    },
    FilterByName(data, Name) { // data是json对象，Name是根据什么字段去重
      // eslint-disable-next-line no-unused-vars
      var map = {}
      var dest = []
      for (var i = 0; i < data.length; i++) {
        var ai = data[i]
        // eslint-disable-next-line eqeqeq
        if (i == 0) {
          dest.push(ai)
        } else {
          var filterData = dest.filter(function(e) {
            // eslint-disable-next-line eqeqeq
            return e[Name] == ai[Name]
          })
          // eslint-disable-next-line eqeqeq
          if (filterData.length == 0) {
            dest.push(ai)
          }
        }
      }
      return dest
    }
  }
}
</script>
<style scoped lang="scss">
.box_collapse{
    display: flex;
    justify-content: space-between;
    .collapse_div{
        width: 50%;
    }
}
.btn{

}
.seach_box{
    display: flex;
    .right_seach{
        margin-left: 100px;
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        .left_text{
            margin-right: 50px;
        }
    }
}
</style>
